<!--建立考核模板第三步--- 添加流程 -->
<template>
  <div>
    <div style="height: 700px; margin: 25px" v-if="page2">
      <!-- 添加流程按钮 -->
      <el-row>
        <el-button
          @click="addEquipment()"
          style="
          background-color: #3B95FF;
           color: #fff;
       border-radius:4px
        height: 32px;
      line-height: 6px;
      margin-bottom: 10px;
           "
        >添加流程</el-button>
        <el-button
          @click="deleteSelected()"
          style="
           background-color: #E86565;
           color: #fff;
       border-radius:4px
        height: 32px;
      line-height: 6px;
      margin-bottom: 10px;
      "
          :disabled="deletes"
        >批量删除</el-button>
      </el-row>
      <!-- 表格信息 -->
      <el-row>
        <el-table
          :data="
            tableData"
          style="width: 100%; color: #333333; font-size: 14px"
          height="500"
          align="center"
          :header-cell-style="{ background: '#ECF1F9' }"
          @selection-change="handleSelectionChangeDepartment"
        >
          <el-table-column type="selection" width="80" align="center"></el-table-column>
          <el-table-column fixed type="index" align="center" label="编号" width="80"></el-table-column>
          <el-table-column
            prop="assessorUsers"
            align="center"
            :show-overflow-tooltip="true"
            label="被考核人"
          >
            <template slot-scope="tags">
              <span
                v-for="(item,index) in tags.row.assessorUsers"
                :key="item.index"
              >{{item.name+' '}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="40">
            <template slot-scope="scope">
              <a @click="openPeopleList(scope.row)">
                <i>
                  <img src="@/assets/kaohePng/yanJing.png" />
                </i>
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="processBeans" align="center" label="审核">
            <template slot-scope="scope">
              <div
                style="text-align:center"
                v-for="(item,index) in scope.row.processBeans"
                :key="index"
              >
                <span>{{ "审核"+ (index+1) + ":" + item.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createBy" align="center" label="创建人" width="120"></el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>

          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="text"
                size="small"
                style="color: red"
              >删除</el-button>
              <el-button @click.native.prevent="editRow(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-pagination
            style="text-align: right;margin-top:16px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-row>
      <!-- 下一页按钮 -->
      <el-row>
        <el-button
          @click="upPage()"
          class="nextOne"
          round
          style="width:113px;height:43px;font-size:18px;border-radius: 50px;"
        >上一步</el-button>
      </el-row>
      <!-- 添加指标弹出框 -编辑弹出框-->
      <el-dialog
        :append-to-body="true"
        :title="titleMap[dialogStatus]"
        :visible.sync="addTarget"
        v-if="addTarget"
        @close="closeTargets('ruleForm')"
        width="29%"
      >
        <el-form
          label-position="left"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          style="margin-left: 35px"
        >
          <el-form-item label="被考核人" :label-width="formLabelWidth" prop="assessorUserType">
            <el-select
              style="width: 330px"
              v-model="ruleForm.assessorUserType"
              @change="selectIndex"
            >
              <el-option label="普通员工" :value="1"></el-option>
              <el-option label="部门负责人" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="'评估人' + (index + 1)"
            :label-width="formLabelWidth"
            v-for="(item, index) in ruleForm.dynamicItem"
            :key="index + 1"
            :prop="`dynamicItem[${index}].name`"
            :rules="rules.dynamicItem.name"
            style="position: relative"
          >
            <!-- <el-cascader
              style="width: 330px"
              :options="options"
              v-model="item.name"
              :disabled="opens1"
              @change="selectIndex1"
              clearable
            >
              <el-option label="部门负责人" value="部门负责人" v-if="opens"></el-option>
              <el-option label="分管领导" value="分管领导"></el-option>
              <el-option label="主要领导" value="主要领导" v-if="!opens"></el-option>
            </el-cascader>-->
            <el-select
              clearable
              style="width: 330px"
              v-model="item.name"
              :disabled="opens1"
              @change="selectIndex1"
            >
              <el-option label="部门负责人" value="部门负责人" v-if="opens"></el-option>
              <el-option label="分管领导" value="分管领导"></el-option>
              <el-option label="主要领导" value="主要领导" v-if="!opens"></el-option>
            </el-select>
            <!-- <el-input autocomplete="off" v-model="item.name" style="width: 330px"></el-input> -->
            <el-button
              @click.native.prevent="deleteItem(index, item)"
              v-if="allBtn"
              type="text"
              style="
            color: red;
              font-size: 22px;
            position: absolute;
               bottom: -2px;
               right: 44px;
                "
              icon="el-icon-remove-outline"
            ></el-button>
          </el-form-item>

          <el-button
            @click="add_dimension"
            v-if="allBtn"
            class="add_dimension"
            style="
            border: none;
               background-color: rgba(76, 106, 248, 0);
               margin-left: -23px;
              "
          >+ 添加评估人</el-button>
          <el-alert
            v-if="shows"
            style="height:20px;width: 68%;margin-left: 17%;margin-top:-12%"
            title="注意：评估人不要重复选择，会影响评估流程"
            type="warning"
            :closable="false"
          ></el-alert>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="closeTargets('ruleForm')"
            style="
             background-color: rgba(213, 215, 220);
              height: 30px;
            line-height: 5px;
              "
          >取 消</el-button>
          <el-button
            type="primary"
            @click="addTargets('ruleForm')"
            style="
           background-color: rgb(76 106 248);
          height: 30px;
             line-height: 5px;
              "
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <el-dialog
      title="被考核人员"
      :visible.sync="centerDialogVisible"
      width="20%"
      style="border-radius:10px"
      center
    >
      <div style="width:100%;height:auto;border: 1px solid #E4E4E4;padding:2%;border-radius:5px">
        <template>
          <span v-for="(item,index) in this.nameList" :key="item.index">{{item+'、'}}</span>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
    
    <script>
import {
  getLiuChengList,
  addThreeStep,
  editThreeStep,
  deleteThreeStep,
  deleteAllliucheng
} from "@/api2/kaohe";
import threeStep from "./threeStep.vue";
export default {
  components: {
    threeStep: threeStep
  },
  props: {
    // 模板id
    personInfo1: {
      type: String
    }
  },
  data() {
    return {
      label1: false,
      label2: false,
      label3: false,
      deletes: true,
      multipleSelectionDepartment: [], // 用于保存选中的行
      centerDialogVisible: false,
      opens: false,
      opens1: true,
      shows: true,
      page2: true,
      page3: false,
      ids: "",
      // options: [
      //   { value: "部门负责人", label: "部门负责人" },
      //   { value: "分管领导", label: "分管领导" },
      //   { value: "主要领导", label: "主要领导" },

      // ],
      number: 1,
      peopleName: "",
      nameList: [],
      allBtn: true, //添加维度,删除维度按钮的开关
      addTarget: false, //添加指标弹窗开关
      formLabelWidth: "80px", //label-width
      no_input: true, //限制选项input框禁用字符
      deleteStyle: true, //删除维度按钮显示隐藏
      // 分页属性定义如下{
      pageNum: 1, //当前页
      total: 0, //总条数
      pageSize: 10, //当前页容量
      // }
      //表格数据数组
      tableData: [],
      latitudeBeansd: [],
      assessTemplateId: "",
      tableColumns: { list: [], header: [] }, //维度数组
      //弹层数组
      ruleForm: {
        assessorUserType: "", //被考核人类型
        //维度
        dynamicItem: [
          {
            state: "1",
            key: "1",
            name: "",
            evaluationTime: "",
            grade: 0,
            opinion: "",
            signature: "",
            userId: ""
          }
        ]
      },
      //规则校验
      rules: {
        //指标名称校验
        name: [
          { required: true, message: "请输入指标名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],

        //填写数量校验
        assessorUserType: [
          { required: true, message: "被考核人必选", trigger: "change" }
        ],
        //维度校验
        dynamicItem: {
          name: [{ required: true, message: "评估人必选", trigger: "blur" }]
        }
      },

      //新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
      titleMap: { addEquipment: "添加流程", editEquipment: "编辑流程" },
      //新增和编辑弹框标题
      dialogStatus: ""
    };
  },
  created() {
    this.getliuchengLists(); //获取流程表格数据
  },
  watch: {
    "tableColumns.list"(newVal) {
      const headerSet = new Set();
      newVal?.forEach(column =>
        Object.keys(column).map(item => item !== "file" && headerSet.add(item))
      );
      this.tableColumns.headers = [...headerSet];
      // console.log(this.tableColumns.headers);
    },
    peopleName(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal == oldVal) {
        this.$message.success("相同评估人只能选一个");
        return;
      }
    }
  },

  methods: {
    //上一步
    upPage() {
      console.log(this.personInfo);
      this.$emit("giveFather", false);
    },
    handleSelectionChangeDepartment(val) {
      this.multipleSelectionDepartment = val;
      if (val) {
        this.deletes = false;
      } else {
        this.deletes = true;
      }
    },
    // 批量删除
    deleteSelected() {
      this.$confirm("此操作将删除选中所有内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let arr = [];
          let vals = this.multipleSelectionDepartment; //选中的值
          if (vals) {
            vals.map(item => {
              arr.push(item.id);
            });
          }
          const ids = { ids: arr.join() };
          deleteAllliucheng(ids).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.getliuchengLists();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    openPeopleList(e) {
      console.log(e);
      let list = [];
      e.assessorUsers.forEach(item => {
        list.push(item.name);
      });
      this.nameList = list;
      console.log(this.nameList);
      this.centerDialogVisible = true;
    },
    selectIndex(e) {
      console.log(e);
      if (e == 1) {
        this.opens1 = false;
        this.opens = true;
      } else {
        this.opens1 = false;
        this.opens = false;
      }
    },
    selectIndex1(e) {
      this.peopleName = e;
    },
    nextPage() {
      this.$emit("giveFather", "3");
      this.page2 = false;
      this.page3 = false;
    },
    // 添加指标按钮
    addEquipment() {
      console.log(this.personInfo1);
      this.addTarget = true;
      this.allBtn = true;
      this.no_input = true;
      this.shows = true;
      //新增弹框标题
      this.dialogStatus = "addEquipment";
      this.ruleForm = {
        assessorUserType: "", //被考核人类型
        dynamicItem: [
          {
            state: "1",
            key: "1",
            name: "",
            evaluationTime: "",
            grade: 0,
            opinion: "",
            signature: "",
            userId: ""
          }
        ]
      };
    },
    // 表格内编辑按钮的点击事件
    editRow(rows) {
      console.log(rows);
      this.addTarget = true;
      this.allBtn = false;
      this.shows = false;
      this.dialogStatus = "editEquipment";
      this.ids = rows.id;
      this.ruleForm.assessorUserType = rows.assessorUserType;
      this.ruleForm.dynamicItem = rows.processBeans;
      this.ruleForm.assessTemplateId = rows.assessTemplateId;
    },
    // 表格内删除按钮的点击事件
    deleteRow(rows) {
      console.log(rows);
      const id = rows.id;
      this.$confirm("此操作将删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          deleteThreeStep(id).then(res => {
            if (res.data === true) {
              this.$message.success("删除成功");
              const totalPage = Math.ceil((this.total - 1) / this.pageSize);
              // 记住删除最后一条数据时当前码是最后一页
              const pageNums =
                this.pageNum > totalPage ? totalPage : this.pageNum;
              // 重新记录当前页码
              this.pageNum = pageNums < 1 ? 1 : pageNums;
              //删除成功 回调列表接口
              this.getliuchengLists();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击添加维度按钮
    add_dimension(index) {
      if (this.ruleForm.dynamicItem.length > 1) {
        this.$message.error("至多添加2个评估人!");
        return;
      } else {
        this.ruleForm.dynamicItem.push({
          key: (this.ruleForm.dynamicItem.length + 1).toString(),
          name: "",
          evaluationTime: "",
          grade: 0,
          opinion: "",
          signature: "",
          userId: "",
          state: "1"
        });
      }
      console.log(this.ruleForm.dynamicItem.length);
    },
    // 删除维度按钮
    deleteItem(index, rows) {
      if (index == 0) {
        this.$message.error("至少要添加一个评估人!");
        return;
      } else {
        this.ruleForm.dynamicItem.splice(index, 1);
      }
    },
    //确定指标按钮点击事件{
    addTargets(formName) {
      console.log(formName);
      this.ruleForm.dynamicItem.forEach(item => {
        item.assessorUserType = this.ruleForm.assessorUserType;
      });
      if (this.dialogStatus == "addEquipment") {
        const params = {
          assessTemplateId: this.personInfo1,
          assessorUserType: this.ruleForm.assessorUserType,
          processBeans: this.ruleForm.dynamicItem
        };
        console.log(params);
        this.$refs[formName].validate(async valid => {
          if (valid) {
            const res = await addThreeStep(params);
            this.$message({
              message: "流程添加成功",
              type: "success"
            });
            this.getliuchengLists();
            this.ruleForm = {
              assessorUserType: "", //被考核人类型
              dynamicItem: [
                {
                  state: "1",
                  key: "1",
                  name: "",
                  evaluationTime: "",
                  grade: 0,
                  opinion: "",
                  signature: "",
                  userId: ""
                }
              ]
            };
            this.addTarget = false;
            this.no_input = true;
            this.$refs[formName].resetFields();
          } else {
            this.$message.error("信息填写不完整!");
            return false;
          }
        });
      } else {
        const params1 = {
          id: this.ids,
          assessTemplateId: this.personInfo1,
          assessorUserType: this.ruleForm.assessorUserType,
          beans: this.ruleForm.dynamicItem
        };

        console.log(params1);
        this.$refs[formName].validate(async valid => {
          if (valid) {
            const res = await editThreeStep(params1);
            console.log(res);
            this.$message({
              message: "流程编辑成功",
              type: "success"
            });
            this.getliuchengLists();
            this.ruleForm = {
              assessorUserType: "", //被考核人类型
              dynamicItem: [
                {
                  state: "1",
                  key: "1",
                  name: "",
                  evaluationTime: "",
                  grade: 0,
                  opinion: "",
                  signature: "",
                  userId: ""
                }
              ]
            };
            this.addTarget = false;
            this.no_input = true;
          } else {
            this.$message.error("信息填写不完整!");
            return false;
          }
        });
      }
    },
    //确定指标按钮点击事件}
    //取消指标按钮点击事件{
    closeTargets(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = {
        assessorUserType: "", //被考核人类型
        dynamicItem: [
          {
            state: "1",
            key: "1",
            name: "",
            evaluationTime: "",
            grade: 0,
            opinion: "",
            signature: "",
            userId: ""
          }
        ]
      };
      this.addTarget = false;
      this.opens1 = true;
      this.no_input = true;

      this.$message({
        message: "已取消"
      });
    },
    //取消指标按钮点击事件}
    //分页逻辑{
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getliuchengLists(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getliuchengLists();
    },
    //获取表格数据
    getliuchengLists() {
      const params = {
        assessTemplateId: this.personInfo1,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      let arr = [];
      getLiuChengList(params)
        .then(res1 => {
          this.total = res1.total; //总条数
          res1.data.sort(
            (a, b) =>
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
          ); //这是升序，倒序的话翻过来
          this.tableData = res1.data;
          console.log(res1.data);
          res1.data.forEach(element => {
            arr.push(element.latitudeBeans);
          });
          this.latitudeBeansd = arr;
        })
        .catch(e => {
          console.log(e);
        });
    }
    //分页逻辑}
  }
};
</script>
    
    <style lang="scss" scoped>
/* 共同样式 */
.add_dimension {
  color: blue;
}
.delete_dimension {
  color: red;
}
.add_dimension:hover {
  color: rgb(72, 72, 234);
}
.delete_dimension:hover {
  color: rgb(245, 71, 71);
}
.nextOne {
  margin-top: 25px;
  margin-left: 45%;
}
::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}
// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}
::v-deep .el-dialog__header {
  background-color: #ecf1f9;
  border-radius: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-tooltip__popper {
  max-width: 10%;
}

::v-deep .el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}
</style>
    